<template>
  <view class="svg-container">
    <!-- 用户头像SVG -->
    <view v-if="svgType === 'user'" class="user-svg">
      <svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient :id="'userGradient-' + uniqueId" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#007AFF" />
            <stop offset="100%" stop-color="#0050A0" />
          </linearGradient>
        </defs>
        <circle cx="40" cy="40" r="39" :fill="'url(#userGradient-' + uniqueId + ')'" stroke="#ffffff" stroke-width="2"/>
        <circle cx="40" cy="30" r="12" fill="#ffffff"/>
        <path d="M40 45 C 25 45 20 58 20 65 L 60 65 C 60 58 55 45 40 45z" fill="#ffffff"/>
      </svg>
    </view>
    
    <!-- AI助手头像SVG -->
    <view v-else-if="svgType === 'ai'" class="ai-svg">
      <svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient :id="'aiGradient-' + uniqueId" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#14D16E" />
            <stop offset="100%" stop-color="#0E9E53" />
          </linearGradient>
        </defs>
        <circle cx="40" cy="40" r="39" :fill="'url(#aiGradient-' + uniqueId + ')'" stroke="#ffffff" stroke-width="2"/>
        <g fill="#ffffff">
          <rect x="28" y="24" width="24" height="32" rx="4"/>
          <circle cx="35" cy="32" r="3"/>
          <circle cx="45" cy="32" r="3"/>
          <rect x="32" y="42" width="16" height="2" rx="1"/>
          <rect x="24" y="36" width="4" height="8" rx="1"/>
          <rect x="52" y="36" width="4" height="8" rx="1"/>
          <rect x="34" y="56" width="12" height="4" rx="1"/>
          <rect x="38" y="56" width="4" height="8" rx="1"/>
        </g>
      </svg>
    </view>
  </view>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';

const props = defineProps({
  src: {
    type: String,
    required: true
  }
});

// 为每个组件实例生成唯一ID，避免SVG渐变ID冲突
const uniqueId = ref('');
onMounted(() => {
  uniqueId.value = Math.random().toString(36).substring(2, 10);
});

// 根据src判断显示哪种类型的SVG
const svgType = computed(() => {
  if (props.src.includes('user-avatar')) {
    return 'user';
  } else if (props.src.includes('ai-avatar')) {
    return 'ai';
  }
  return '';
});
</script>

<style>
.svg-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-svg, .ai-svg {
  width: 100%;
  height: 100%;
}

svg {
  width: 100%;
  height: 100%;
}
</style> 